<script setup>
import PageTop from "@/components/PageTop.vue";
import AreaTop from "@/components/AreaTop.vue";
import HonorItem from "@/components/items/HonorItem.vue";

</script>

<template>
  <page-top title="坤石荣誉" desc="Kunshi Honor" bg-image="https://www.chinaydfl.com/upfile/image/20210412/1618212557_425572.jpg"></page-top>
  <area-top title="荣誉资质"/>

  <div class="new-page wrap">
    <h1 class="text-center">荣誉资质</h1>
    <h5 class="text-center" style="color: #868686;">每一次的肯定都是对我们不断前进的莫大动力</h5>
    <div class="short-line"></div>

    <div class="honor-list">
      <honor-item v-for="honor in 6" icon="https://gd-hbimg.huaban.com/9151b336d3dfe00f5e07131478f9a5a6c044307e13123-EfBQ7R_fw1200" title="2021年度中国石油大学（华东）优秀毕业生" />
    </div>

  </div>
</template>

<style scoped lang="scss">
.short-line{
    width: 40px;
    height: 5px;
    background-color: #E2E2E2;
    margin: 40px auto;
}
.honor-list{
  display: grid;
  // 3列
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 20px;
}


</style>
